<template>
  <div>
    <van-tabbar
      v-model="active"
      active-color="#f09036"
    >
      <van-tabbar-item @click="gotoAddress({path: 'takeOut'})" icon="home-o">外卖</van-tabbar-item>
      <van-tabbar-item @click="gotoAddress({path: 'groupBuying'})" icon="point-gift-o">团购</van-tabbar-item>
      <van-tabbar-item @click="gotoAddress({path: 'seckill'})" icon="fire-o">秒杀</van-tabbar-item>
      <van-tabbar-item @click="gotoAddress({path:'order'})" icon="orders-o">订单</van-tabbar-item>
      <van-tabbar-item @click="gotoAddress({path:'/my'})" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
    	data(){
            return{
                active: this.activeIndex
            }
        },
        created(){
           
        },
        mounted(){
            
        },
        computed: {
        },
        props: ['activeIndex'],
        methods: {
        	gotoAddress(path){
            this.active = this.activeIndex;
        		this.$router.push(path)
        	}
        },

    }

</script>

<style lang="scss" scoped>
    @import '../../style/mixin';

    #foot_guide{
        background-color: #fff;
        height: 49px;
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
    }
    .guide_item{
    	flex: 1;
    	display: flex;
    	text-align: center;
    	flex-direction: column;
    	align-items: center;
		.icon_style{
			width: px2Rem(20);
            height: px2Rem(15);
            margin-top: px2Rem(5);
            fill: red;
            margin-bottom: px2Rem(3);
		}
		span{
			@include sc(px2Rem(12), #666);
		}
    }
   
</style>
